import React,{useState} from "react";
import style from "./Layout.module.css";
import { useNavigate } from "react-router-dom";
// 左滑医生卡片组件
function SwipeDoctorCard({ avatar, name, tag, meta, score, users, checked, onPhoneClick, onChatClick }) {
  const [offset, setOffset] = React.useState(0);
  const startX = React.useRef(0);
  const dragging = React.useRef(false);
  // 触摸事件
  const onTouchStart = e => {
    dragging.current = true;
    startX.current = e.touches[0].clientX;
  };
  const onTouchMove = e => {
    if (!dragging.current) return;
    const dx = e.touches[0].clientX - startX.current;
    setOffset(Math.max(Math.min(dx, 0), -60));
  };
  const onTouchEnd = () => {
    dragging.current = false;
    setOffset(offset < -30 ? -60 : 0);
  };
  return (
    <div style={{position:'relative',overflow:'hidden',marginBottom: '16px'}}>
      {/* 按钮区：电话+聊天 */}
      <div style={{
        position: 'absolute', right: '12px', top: '50%', transform: 'translateY(-50%)',
        zIndex: 1, transition: 'right 0.2s, opacity 0.2s', pointerEvents: offset === -60 ? 'auto' : 'none',
        opacity: offset === -60 ? 1 : 0, display: 'flex', gap: '10px'
      }}>
        <div style={{
          width: '40px', height: '40px', borderRadius: '50%',
          background: '#b6d36b', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: '22px', boxShadow: '0 2px 8px #ecebe7', cursor: 'pointer'
        }} onClick={onPhoneClick}>
          <span role="img" aria-label="电话">📞</span>
        </div>
        <div style={{
          width: '40px', height: '40px', borderRadius: '50%',
          background: '#6ec1e4', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#fff', fontSize: '22px', boxShadow: '0 2px 8px #ecebe7', cursor: 'pointer'
        }} onClick={onChatClick}>
          <span role="img" aria-label="聊天">💬</span>
        </div>
      </div>
      {/* 医生卡片本体 */}
      <div
        style={{
          background: '#fff', borderRadius: '16px', boxShadow: '0 1px 4px #ecebe7',
          display: 'flex', alignItems: 'center', padding: '12px 16px', transform: `translateX(${offset}px)`,
          transition: dragging.current ? 'none' : 'transform 0.2s'
        }}
        onTouchStart={onTouchStart}
        onTouchMove={onTouchMove}
        onTouchEnd={onTouchEnd}
      >
        <img src={avatar} alt="医生" style={{width:'48px',height:'48px',borderRadius:'50%',objectFit:'cover',marginRight:'12px'}} />
        <div style={{flex:1}}>
          <div style={{fontWeight:600,fontSize:'16px',color:'#4a3a2c',display:'flex',alignItems:'center',gap:'6px'}}>
            {name} {checked && <span style={{color:'#ff9800',fontSize:'18px'}}>✔</span>}
          </div>
          <div style={{fontSize:'15px',color:'#b0a99a',margin:'2px 0'}}>{tag} <span style={{margin:'0 4px'}}>·</span> <span role="img" aria-label="定位">📍</span> {meta}</div>
          <div style={{display:'flex',alignItems:'center',gap:'4px',marginTop:'2px'}}>
            <span style={{color:'#ffe066'}}>★★★☆☆</span>
            <span style={{color:'#b0a99a',fontSize:'15px'}}>{score}</span>
            <span style={{color:'#b0a99a',fontSize:'15px'}}>{users} 位用户</span>
          </div>
        </div>
      </div>
    </div>
  );
}
export default function Layout() {
  const navigate = useNavigate();
  return (
    <div className={style.layoutContainer}>
      {/* 顶部深色卡片和tab */}
      <div className={style.topCard}>
        <div className={style.topTitleRow}>
          <span style={{fontSize: '22px', fontWeight: 700, cursor: 'pointer'}} onClick={() => navigate(-1)}>←</span>
          <span>寻找医生</span>
        </div>
       
        <div className={style.topSearch}>
          <input placeholder="搜索" />
          <span className={style.topSearchIcon}></span>
        </div>
      </div>

      {/* 按问题浏览 */}
      <div className={style.browseRow}>
        <span className={style.browseTitle}>按问题浏览</span>
        <span className={style.browseAll}>查看全部</span>
      </div>
      <div className={style.browseIcons}>
        <div className={style.browseIconWrap}>
          <div className={style.browseIconCircle + ' ' + style.browseIconRed}>😟</div>
          <div className={style.browseIconText}>焦虑</div>
        </div>
        <div className={style.browseIconWrap}>
          <div className={style.browseIconCircle + ' ' + style.browseIconPurple}>🧠</div>
          <div className={style.browseIconText}>精神病</div>
        </div>
        <div className={style.browseIconWrap}>
          <div className={style.browseIconCircle + ' ' + style.browseIconRed}>💤</div>
          <div className={style.browseIconText}>睡觉</div>
        </div>
        <div className={style.browseIconWrap}>
          <div className={style.browseIconCircle + ' ' + style.browseIconYellow}>😊</div>
          <div className={style.browseIconText}>儿童</div>
        </div>
        <div className={style.browseIconWrap}>
          <div className={style.browseIconCircle + ' ' + style.browseIconOrange}>😢</div>
          <div className={style.browseIconText}>悲伤</div>
        </div>
      </div>

      {/* 智能建议卡片 */}
      <div className={style.suggestCard}>
        <div className={style.suggestTitle}>弗洛伊德人工智能建议</div>
        <div className={style.suggestDoctorCard}>
          <img className={style.suggestAvatar} src="https://randomuser.me/api/portraits/women/44.jpg" alt="医生" />
          <div className={style.suggestDocInfo}>
            <div className={style.suggestDocNameRow}>
              医生昵称 <span style={{color:'#ff9800',fontSize:'16px'}}></span>
            </div>
            <div className={style.suggestDocMeta}>
              <span>焦虑症专家</span>
              <span>·</span>
              
            </div>
            <div className={style.suggestDocDesc}>
              福斯医生是所有医学领域的天才。她确实是一个好医生
            </div>
            <div className={style.suggestDocStars}>
              <span style={{color:'#ffe066'}}>★</span><span style={{color:'#ffe066'}}>★</span><span style={{color:'#ffe066'}}>★</span><span style={{color:'#ffe066'}}>★</span><span style={{color:'#b0a99a'}}>★</span>
              <span className={style.suggestDocScore}>4.5</span>
              <span className={style.suggestDocScore}>· 1.2K</span>
            </div>
          </div>
        </div>
        <div className={style.suggestMatch}>
          <span className={style.suggestMatchIcon}>❓</span>
          弗洛伊德人工智能匹配
          <span className={style.suggestMatchPercent}>99.571%</span>
        </div>
      </div>

      {/* 所有医生 */}
      <div className={style.allDoctorsTitleRow}>
        <span className={style.allDoctorsTitle}>所有医生</span>
        <span className={style.allDoctorsSort}>最受欢迎 <span style={{fontSize:'15px'}}></span></span>
      </div>
      <div className={style.allDoctorsList}>
        <SwipeDoctorCard avatar="https://randomuser.me/api/portraits/men/45.jpg" name="医生昵称" tag="压力" meta="1.1公里" score="4.1" users="96" checked onPhoneClick={() => navigate('/list')} onChatClick={() => navigate('/login')} />
        <SwipeDoctorCard avatar="https://randomuser.me/api/portraits/women/46.jpg" name="医生昵称" tag="强迫症专家" meta="900m" score="3.4" users="221" onPhoneClick={() => navigate('/list')} onChatClick={() => navigate('/login')} />
      </div>
    </div>
  );
}